<template>
  <div class="ui-footer">
    <div class="ui-center ui-flex">
      <div class="left">
        <div class="title">友情链接</div>
        <div class="list">
          <a class="item" @click="JumpUrl('http://epc.swu.edu.cn/')">西南大学西南民族教育与心理研究中心</a>
          <a class="item" @click="JumpUrl('https://www.cpon.cn/')">民族文化宫</a>
        </div>
      </div>
      <div class="middle">
        <i></i>
      </div>
      <div class="right">
        <div class="title">数据库</div>
        <div class="list">
          <a target="_blank" class="item" @click="JumpUrl('http://epcdb.swu.edu.cn')">中国民族教育发展数据库</a>
          <a @click="Develop" class="item">中华民族共同体意识教育音频库</a>
          <a @click="Develop" class="item">中华民族共同体意识教育视频库</a>
          <a @click="Develop" class="item">字源识字资源平台</a>
        </div>
      </div>
    </div>
  </div>
  <UiDevelop ref="uiDevelopRef" />
</template>

<script setup>
const JumpUrl = url => {
  window.open(url);
};

let uiDevelopRef = ref();
const Develop = () => {
  uiDevelopRef.value.Show();
};
</script>

<style lang="scss" scoped>
.ui-footer {
  @include bgImg('../assets/footer-bg.png');
  background-color: #9c2c29;
  background-position: right bottom;
  background-size: 742px 248px;
  padding: 47px 0;
  .ui-center {
    padding: 0 40px;
    box-sizing: border-box;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    line-height: 34px;
    padding-bottom: 20px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin: 0 20px 16px 0;
      font-size: 14px;
      color: #ffffff;
      line-height: 18px;
      cursor: pointer;
    }
  }
  .left {
    min-width: 604px;
    flex: 1;
  }
  .middle {
    flex-shrink: 0;
    margin: 0 80px;
    background: rgba(226, 223, 220, 0.2);
    width: 2px;
    height: 154.5px;
    position: relative;
    i {
      position: absolute;
      left: -2px;
      top: 0px;
      background: #d0c9c1;
      width: 6px;
      height: 53px;
    }
  }
  .right {
    flex: 1;
    .list {
      a {
        width: 100%;
      }
    }
  }
}
</style>
